<template>
  <div class="share-info">
      <div class="up">
          <h4>{{list.title}}</h4>
          <div class="up-content">
              <span>发布时间:{{list.time}}</span>
              <span>{{list.hits}}</span>
          </div>
      </div>
      <div class="shareInfo">
              <div class="share-img">
                  <swipe></swipe>
              </div>
          
          {{list.content}}
      </div>
      <comment ></comment>
  </div>
</template>

<script>
import comment  from "../subcomponents/Comment.vue"
import swipe from '../untils/swipe.vue'
export default {
  name: 'share-info',
  data() { 
    return {
    list:{
            title:"中国好声音",
            time:"2017-2-22 02:02",
            hits:11,
            content:"2019年2月27日 - 可以直接跳转到下一行进行编辑,本行后面的字符不受影响。 这在书写html脚本时非常有用。 分类: vscode 好文要顶 关注我 收藏该文 天地玄黄 关注- 9 ...更多同站结果>>"


        }
    }
  },
  components:{
      comment,swipe
  }
 }
</script>

<style lang="" scoped>
.share-img{
    height: 50px;
    width: 100%;
}
.up{
    border-bottom: 1px solid #e1e1e7;
    padding: 10px;
}
    .newsInfo{
        padding: 10px;
        
    }
.up-content{
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color:#87CEFb;
}
h4{
    padding:10px;
    margin: 0 auto;
    text-align: center;
}
.shareInfo{
    font-size: 14px;
}
</style>